<template>
	<view class="conter">
		<!-- 要用list列表来写 -->
		<view @click="show = true" class="cuIcon">
			<view style="margin-top: 5rpx">
				<image :src="imgUrl + '/static/images/shaixuan.png'" mode=""></image>
			</view>
			<view>筛选</view>
		</view>
		<u-list height="1300rpx" @scrolltolower="scrolltolower">
			<u-list-item v-if="OrderList.length !== 0" v-for="(item, index) in OrderList" :key="index">
				<view class="allorders" @click="goTimesDetails(item)">
					<view class="action">
						<view class="image_name">
							<view class="image">
								<image radius="7rpx" class="img-box" :src="imgUrl + item.propImg" alt=""></image>
							</view>
							<view class="name">{{ item.propName }}</view>
						</view>

						<view
							style="font-size: 26rpx; position: absolute; right: 34.88rpx; margin-top: 130rpx; color: #fff">
							x{{ item.buyMemberPropNum }}</view>
						<view class="econda">
							<view style="display: flex; margin-top: 48rpx">
								<view style="color: #8a92a3; font-size: 24rpx">实付款：</view>
								<view style="font-size: 32rpx">
									<text style="font-size: 24rpx">￥</text>
									{{ item.sumPrice ? item.sumPrice.toFixed(2) : 0 }}
								</view>
							</view>
						</view>
					</view>
					<view class="Time_box">
						{{item.orderTime}}
					</view>
					<view class="badge_box">
						<view class="orders" v-if="item.status == 2">订单已取消</view>
						<view class="orders" v-if="item.status == 1">订单成功</view>
						<view class="orders" v-if="item.status == 0">
							<u-count-down
								v-if="item.status == 0"
								@finish="endTimes(index)"
								:time="item.expireDate"
								format="HH:mm:ss"
								autoStart
								millisecond
								@change="onChange"
							></u-count-down>
						</view>
						<view class="orders_box" v-if="item.status == 0">查看详情</view>
					</view>
				</view>
			</u-list-item>
			<view v-if="OrderList.length == 0">
				<image style="
				width: 280rpx;
				height: 280rpx;
				margin: 200rpx 220rpx 0;
				" src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</u-list>
		<u-popup bgColor="transparent" :show="show" :round="45" mode="bottom" @close="close">
			<view class="close">
				<view class="closeone">筛选</view>
				<view class="closetow"></view>
				<!-- icon -->
				<u-icon @click="closePopup" class="closethree" color="#fff" size="18" bold name="close"></u-icon>
				<!-- 选项 -->
				<view class="Options">
					<text>全部订单状态</text>
					<view class="Optionsone">
						<view :class="{ active: activeIndex == index }" @click="getactive(item, index)"
							v-for="(item, index) in venList" :key="index">
							{{ item }}
						</view>
					</view>
				</view>
				<!--按钮 -->
				<view class="butonbox">
					<button @click="closePopup" class="buttonone">取消</button>
					<button class="buttontow" @click="onConfirm">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- 要用list列表来写 -->
	</view>
</template>

<script>
	import {
		getshiList
	} from '@/api/order';
	import config from '@/config.js';
	export default {
		name: 'shi-order',
		data() {
			return {
				show: false,
				activeIndex: 0,
				venList: ['全部', '待支付', '已支付', '已取消'],
				timeData: {},
				seachParam: {
					pageNum: 1, //当前页
					pageSize: 4, //每页条数
					status: ''
				},
				imgUrl: config.imgUrl,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				current: 0,
				loadStatus: 'loadmore',
				status: '',
				OrderList: [],
				totalSize: 0 //总条数
			};
		},
		created() {
			this.addRandomData();
		},
		watch: {
			$route: function(newValue, oldValue) {
				// 在这里执行你需要的操作，比如重新请求数据
				this.OrderList = [];
				this.getList();
			}
		},
		methods: {
			closePopup() {
				this.show = false;
			},
			endTimes(i) {
				this.OrderList[i].status = 2;
			},
			onChange(e) {
				this.timeData = e;
			},
			goTimesDetails(item) {
				console.log(item);
				if (item.status == 0) {
					uni.navigateTo({
						url: `/pages/MarketOrder/timesOrderDetails?id=${item.id}`
					});
				}
			},
			scrolltolower() {
				this.addRandomData();
			},
			getactive(e, index) {
				if (e === '待支付') {
					this.activeIndex = 1;
				} else if (e === '已支付') {
					this.activeIndex = 2;
				} else if (e === '已取消') {
					this.activeIndex = 3;
				} else {
					this.activeIndex = 0;
				}
			},
			onConfirm() {
				if (this.activeIndex == 0) {
					this.seachParam.status = '';
					this.seachParam.pageNum = 1;
					this.OrderList = [];
					this.addRandomData();
				} else if (this.activeIndex == 1) {
					this.seachParam.status = 0;
					this.seachParam.pageNum = 1;
					this.OrderList = [];
					this.addRandomData();
				} else if (this.activeIndex == 2) {
					this.seachParam.status = 1;
					this.seachParam.pageNum = 1;
					this.OrderList = [];
					this.addRandomData();
				} else if (this.activeIndex == 3) {
					this.seachParam.status = 2;
					this.seachParam.pageNum = 1;
					this.OrderList = [];
					this.addRandomData();
				}
				this.show = false;
			},
			addRandomData() {
				if (this.seachParam.pageNum == 1) {
					if (this.OrderList.length === 0) {
						this.getList();
					} else if (this.OrderList.length < this.totalSize) {
						this.seachParam.pageNum++;
						this.getList();
					} else {
						// 没有更多数据可加载
						this.status = 'nomore';
					}
				} else {
					if (this.totalSize > this.OrderList.length) {
						this.seachParam.pageNum++;
						this.getList();
					} else {
						// 没有更多数据可加载
						this.status = 'nomore';
					}
				}
			},

			async getList() {
				const res = await getshiList(this.seachParam);
				// console.log(res, 'pppp');
				if (res.code == 200) {
					res.data.pageData.map((i) => {
						this.OrderList.push(i);
					});
					// console.log(this.OrderList, 'this.OrderList');
					if (this.seachParam.status === 0 || this.seachParam.status == '') {
						// this.status == res.data.status;
						// console.log(this.status,"ppp");
						this.OrderList.forEach((order) => {
							if (order.status == 0) {
								const expireTime = order.expireTime;
								const startDate = new Date();
								const endDate = new Date(expireTime);
								const timeDiff = endDate.getTime() - startDate.getTime(); // 计算时间差
								order.expireDate = Math.floor(timeDiff);
								// console.log(order.expireDate, 'expireDate');
							}
						});
					}
					this.totalSize = res.data.totalSize;
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	::v-deep .u-count-down__text {
		color: red;
	}
	.conter {
		padding: 34.88rpx 34.88rpx;

		.cuIcon {
			display: flex;
			position: absolute;
			top: 30rpx;
			right: 47.09rpx;

			image {
				width: 21rpx;
				height: 19rpx;
			}

			view {
				font-size: 24rpx;
				font-weight: 500;
				color: #8a92a3;
				margin-left: 5rpx;
			}
		}

		.Time_box {
			left: 34.88rpx;
			bottom: 110rpx;
			color: #ffffff;
			font-weight: 500;
			font-size: 26rpx;
			position: absolute;
			font-family: "font";
		}

		.allorders {
			margin-bottom: 35rpx;
			width: 680rpx;
			height: 358rpx;
			background: #15142d;
			border-radius: 14rpx;
			position: relative;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);

			.action {
				display: flex;
				justify-content: space-between;
				padding: 34.88rpx 34.88rpx 0 34.88rpx;

				.image_name {
					display: flex;
					color: #ffffff;
					font-weight: 500;
					font-size: 26rpx;
					font-family: 'font';

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 14rpx;
						// background-color: pink;
						box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
					}

					.name {
						display: flex;
						height: 140rpx;
						margin-left: 34.88rpx;
						align-items: center;
					}
				}

				.econda {
					color: #ffffff;
					font-weight: 500;
					font-family: 'font';
					margin-top: 140rpx;
				}
			}

			.badge_box {
				width: 610rpx;
				height: 83rpx;
				display: flex;
				font-weight: 500;
				font-size: 26rpx;
				align-items: center;
				font-family: 'font';
				margin: 15.7rpx 34.88rpx;
				border-top: 1rpx solid #282c34;
				justify-content: space-between;
				padding: 0 34.88rpx 0 34.88rpx;

				.orders {
					color: #46a6f8;
				}

				.orders_box {
					display: flex;
					align-items: center;
					padding: 0 20rpx 0 20rpx;
					height: 50rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #ffffff;
					text-align: center;
					border-radius: 9rpx;
					box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
					background: linear-gradient(270deg, #4463ff 0%, #3addeb 100%);
				}
			}
		}

		//弹框大盒子
		.close {
			width: 750rpx;
			height: 507.56rpx;
			background: #1c1f25;
			border-radius: 45rpx 45rpx 0rpx 0rpx;
			opacity: 1;
			border: 3rpx solid #282c34;
			position: relative;

			.closeone {
				//筛选
				font-size: 31rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				margin: 38.37rpx 0;
			}

			.closetow {
				//线条
				width: 694rpx;
				height: 1rpx;
				background: #282c34;
				margin: auto;
			}

			.closethree {
				position: absolute;
				right: 38.37rpx;
				top: 48.37rpx;
			}

			.Options {
				margin: 34.88rpx 30rpx;

				text {
					font-size: 26rpx;
					font-family: 'font';
					font-weight: 400;
					color: #8e97a8;
				}

				.Optionsone .active {
					background: #46a6f8;
					color: #fff;
				}

				.Optionsone {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin: 17.44rpx 0;
					font-size: 26rpx;
					font-family: 'font';
					font-weight: 400;
					color: #3c424d;

					view {
						width: 140rpx;
						height: 61rpx;
						background: #0d0e12;
						border-radius: 16rpx;
						text-align: center;
						line-height: 63rpx;
					}
				}
			}

			//按钮
			.butonbox {
				display: flex;
				margin-top: 100rpx;

				.buttonone {
					width: 209rpx;
					height: 77rpx;
					background: #0d0e12;
					box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					opacity: 1;
					border: 2rpx solid #3c424d;
					font-size: 28rpx;
					font-family: 'font';
					font-weight: 400;
					color: #3c424d;
					line-height: 77rpx;
				}

				.buttontow {
					width: 436rpx;
					height: 77rpx;
					background: linear-gradient(270deg, #4463ff 0%, #3addeb 100%);
					box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					opacity: 1;
					font-size: 28rpx;
					font-family: 'font';
					font-weight: 400;
					color: #ffffff;
					line-height: 77rpx;
				}
			}
		}

		// 弹框大盒子
	}
</style>